<%@page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="./themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" />
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/jquery.jqGrid.min.js"></script>

<title> SM Devlopment </title>

<!-- div 레이아웃 태그 css 파일 S  -->

<style type="text/css">

#total {
	position:absolute;
	width:1550px;
	height:770px;
	z-index:1;
	top: 3px;
	left: 5px;
}

#tabmenu {
	position:absolute;
	width:1500px;
	height:80px;
	z-index:2;
	left: 15px;
	top: 10px;
	text-align:center;
}

#menu {
	position:absolute;
	width:200px;
	height:510px;
	z-index:4;
	left: 25px;
	top: 148px;
}
#body {
	position:absolute;
	width:1500px;
	height:600px;
	z-index:5;
	left: 15px;
	top: 105px;
}
#bottom {
	position:absolute;
	width:1500px;
	height:40px;
	z-index:6;
	left: 15px;
	top: 720px;
	text-align: center;
}

#inner {
	position:absolute;
	width:1450px;
	height:550px;
	z-index:7;
	left: 25px;
	top: 26px;
}
#left {
	position:absolute;
	width:400px;
	height:277px;
	z-index:8;
	left: 23px;
	top: 61px;
}
#right {
	position:absolute;
	width:400px;
	height:274px;
	z-index:9;
	left: 566px;
	top: 60px;
	text-align:right;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#down {
	position:absolute;
	width:500px;
	height:32px;
	z-index:10;
	left: 19px;
	top: 356px;
}


#center {
	position:absolute;
	width:683px;
	height:389px;
	z-index:2;
	left: 408px;
	top: 64px;
	text-align:center;
}
</style>

<!-- div 레이아웃 태그 css 파일 E  -->


<!-- 그리드 출력 스크립트 S -->

<script type="text/javascript">
	$(function() {
		jQuery("#list2").jqGrid('GridUnload');
		jQuery("#list2").jqGrid({
			url : 'output_test.jsp',
			datatype : "json",
			colNames : [ 'RID', 'R_NAME', 'R_DESCRIPTION', ],
			colModel : [ {
				name : 'RID',
				index : 'RID',
				width : 55,
				editable : true,
				editoptions : {
					size : 10
				}
			}, {
				name : 'R_NAME',
				index : 'R_NAME',
				width : 100,
				editable : true,
				editoptions : {
					size : 10
				}
			}, {
				name : 'R_DESCRIPTION',
				index : 'R_DESCRIPTION',
				width : 250,
				editable : true,
				editoptions : {
					size : 25
				}
			}

			],
			rowNum : 10,
			rowList : [ 10, 20, 30 ],
			pager : '#pager2',
			sortname : 'RID',
			viewrecords : true,
			sortorder : "desc",
			loadtext : "Loading...",
			caption : "Navigator Example",
			editurl : "role_conn.jsp",
			height : "100%",

		});
/*  그리드 출력 스크립트 E */ 	
		
		
		
/* 로딩 텍스트 출력 및 숨김	S */	

		$('.loading').show();
		$('.loading').hide();
		
/* 로딩 텍스트 출력 및 숨김	E */		



/* navGrid 버튼들 그리드 S */


		jQuery("#list2").jqGrid(
				'navGrid',
				'#pager2',

				{
					edittext : "",
					edittitle : "Edit selected row",
					addtext : "",
					addtitle : "Add new row",
					deltext : "",
					deltitle : "Delete selected row",
					searchtext : "",
					searchtitle : "Find records",
					refreshtext : "",
					refreshtitle : "Reload Grid",
					alertcap : "Warning",
					alerttext : "Please, select row",
					viewtext : "",
					viewtitle : "View selected row"
				}, //options

				{
					editCaption : "Edit Record",
					bSubmit : "전송",
					bCancel : "취소",
					bClose : "Close",
					saveData : "Data has been changed! Save changes?",
					bYes : "Yes",
					bNo : "No",
					bExit : "Cancel",
					closeAfterEdit : true,
					reloadAfterSubmit : false
				}, // edit options

				{
					addCaption : "Add Record",
					bSubmit : "전송",
					bCancel : "취소",
					clearAfterAdd : true,
					processData : "Processing...",
					height : 280,
					closeAfterAdd : true,
					reloadAfterSubmit : false
				}, // add options

				{
					caption : "Delete",
					msg : "Delete selected record(s)?",
					bSubmit : "전송",
					bCancel : "취소",
				}, // del options

				{
					caption : "Search...",
					Find : "Find",
					Reset : "Reset",
					odata : [ 'equal', 'not equal', 'less', 'less or equal',
							'greater', 'greater or equal', 'begins with',
							'does not begin with', 'is in', 'is not in',
							'ends with', 'does not end with', 'contains',
							'does not contain' ],
					groupOps : [ {
						op : "AND",
						text : "all"
					}, {
						op : "OR",
						text : "any"
					} ],
					matchText : " match",
					rulesText : " rules",
				}, // search options
				{
					refresh : false,
					refreshstate : "firstpage",
					afterRefresh : function() {
						refreshGrid();
						alert("확인");
					}
				}); // refresh options

/*	여기서 부터는 삭제해도 무방 지금 계속 수정중 S */		
				
				/*	navButton 추가  jquery load S */
		$("#list2").jqGrid('navButtonAdd', "#pager2", {
			caption : "",
			title : "Reload Grid",
			buttonicon : "ui-icon-refresh",
			onClickButton : function() {
				alert('"Refresh" button is clicked!');
				/*	navButton 추가  jquery load E */
				
				
				
				/*	setgridparam jquery load S */

				jQuery("#list2").jqGrid('setGridParam', {
					datatype : 'json',
					colNames : [ 'RID', 'R_NAME', 'R_DESCRIPTION', ],
					colModel : [ {
						name : 'RID',
						index : 'RID',
						width : 55,
						editable : true,
						editoptions : {
							size : 10
						}
					}, {
						name : 'R_NAME',
						index : 'R_NAME',
						width : 100,
						editable : true,
						editoptions : {
							size : 10
						}
					}, {
						name : 'R_DESCRIPTION',
						index : 'R_DESCRIPTION',
						width : 250,
						editable : true,
						editoptions : {
							size : 25
						}
					}

					],
					rowNum : 10,
					rowList : [ 10, 20, 30 ],
					pager : '#pager2',
					sortname : 'RID',
					viewrecords : true,
					sortorder : "desc",
					loadtext : "Loading...",
					caption : "Navigator Example",
					editurl : "role_conn.jsp",
					height : "100%",

				}).trigger("reloadGrid");

			}

		});
		/*	setgridparam jquery load E */
		
		
/*	여기서 부터는 삭제해도 무방 지금 계속 수정중 E */		
		
/* navGrid 버튼들 그리드 E */


	});
</script>

</head>



<body>

<div id="total">

	
		<div id="tabmenu">
    			<c:import url="tabmenu.jsp" />
		</div>
  
		<div id="body">
				<div id="inner">
    					<div id="center">
        	 					<table id="list2"></table>
								<div id="pager2"></div>
       					</div>
    			</div>
	  			<br> 
		</div>

		<div id="bottom">
				<c:import url="footer.jsp" />
		</div>
</div>

</body>
</html>
		
